import React, { useState } from "react";
import {
  ResultPage,
  Button,
  Swiper,
  Image,
  CalendarPickerView,
  Popup,
} from "antd-mobile";
import styles from "./css/home.module.css";
import { LoopOutline } from "antd-mobile-icons";
import dayjs from "dayjs";
function App() {
  const [visible5, setVisible5] = useState(false);
  const [cityDate, setCityDate] = useState(dayjs().format("YYYY-MM-DD"));
  const [cityDateWeek, setCityDateWeek] = useState(dayjs().format("dddd"));

  const handelChangeData = (val) => {
    const data = dayjs(val).format("YYYY-MM-DD");
    setCityDate(data);
    setCityDateWeek(dayjs(val).format("dddd"));
    setVisible5(false);
  };


  return (
    <div className="box">
      <ResultPage
        className={styles.resultPage}
        status=""
        title="火车票预订"
        description="便捷购票，服务您的每一次出行"
      >
        <ResultPage.Card style={{ padding: 8 }}>
          <div className={styles.CardRow}>
            <span>北京</span>
            <LoopOutline fontSize={26}  />
            <span>上海</span>
          </div>
          <div className={styles.CardRow} onClick={() => setVisible5(true)}>
            <div>
              <span className={styles.day}>{cityDate}</span>
              <span>{cityDateWeek}</span>
            </div>
          </div>
          <div className={styles.CardRow}>
            <Button
              block
              color="warning"
              shape="rounded"
              onClick={() => handelToList()}
            >
              搜索
            </Button>
          </div>
        </ResultPage.Card>
      </ResultPage>
      <Popup
        visible={visible5}
        onMaskClick={() => {
          setVisible5(false);
        }}
        bodyStyle={{
          borderTopLeftRadius: "8px",
          borderTopRightRadius: "8px",
          minHeight: "40vh",
        }}
      >
        <CalendarPickerView
          min={Date.now()}
          max={Date.now() + 14 * 24 * 60 * 60 * 1000}
          onChange={(val) => handelChangeData(val)}
        />
      </Popup>
    </div>
  );
}

export default App;
